<template>
<!-- 创建灵堂 -->
	<view class="viewlifehistory" :style="'background-image: url('+photo_cdn+'/zpupload/20230720/821e71c9dcfd3d9594.png);'">
		<view class="jb_renter_border flexc"  :style="'background-image: url('+photo_cdn+'zpupload/20230720/c302a2d961da2589db.png);'">
			<view class="already_sculpture" v-if="dead_info.photo">
				<image class="alaready_img" :src="photo_cdn+dead_info.photo" mode="aspectFill"></image>
				<image @tap.stop="deleteimg" class="alaready_delete" :src="photo_cdn + 'zpupload/static/img/delicons.png'"></image>
			</view>
			<view v-else class="upload_sculpture" @tap="uploadimg">
				<view class="shulines"></view>
				<view class="henglines"></view>
			</view>
		</view>	
		
		<view class="zupulable_from">
			<view class="lable_cell_items">
				<view class="lable_names">灵堂主人</view>
				<view class="lable_input_view">
					<input class="lable_input_tag" v-model="dead_info.name" type="text" placeholder="请输入灵堂主人名讳" ></input>
				</view>
			</view>
			
			<view @tap="showpicker1" class="lable_cell_items">
				<view class="lable_names">生日</view>
				<view class="lable_input_view">
					<input :disabled="true" v-model="dead_info.birthday" class="lable_input_tag" type="text" value="" placeholder="请输入出生日期" ></input>
				</view>
			</view>
				
			<view @tap="showpicker2" class="lable_cell_items">
				<view class="lable_names">忌日</view>
				<view class="lable_input_view">
					<input :disabled="true" v-model="dead_info.deathday" class="lable_input_tag" type="text" value="" placeholder="请输入出生日期" ></input>
				</view>
			</view>
					
			<view class="lable_cell_items">
				<view class="lable_names">挽辞或者悼词</view>
				<view class="lable_input_view">
					<textarea class="lable_textarea_tag" v-model="dead_info.elegiac"  placeholder="请输入灵堂主人的挽辞或者悼词"></textarea>
				</view>
			</view>
			
			<view style="font-size: 30rpx;font-weight: 800;color: #295B6E;">*为避免不必要的麻烦，请仔细确认灵堂主人的信息无误后，再创建灵堂</view>
		</view>
		
		<view class="sub_footbtn">
			<view v-if="source==2" class="sub_button" @tap="toModify">确定编辑</view>
			<view v-else class="sub_button" @tap="toFound">确定创建</view>
		</view>
		
		<w-picker
		    mode="yearMonth" 
		    startYear="100"
		    endYear="2030"
		    :defaultVal="defaultVal1" 
			:selectList="selectList1"
		    :current="true" 
		    @confirm="onConfirm1" 
		    ref="picker1" 
		    themeColor="#5771FF"
		></w-picker>
		<w-picker
		    mode="yearMonth" 
		    startYear="100"
		    endYear="2030"
		    :defaultVal="defaultVal1" 
			:selectList="selectList1"
		    :current="true" 
		    @confirm="onConfirm2" 
		    ref="picker2" 
		    themeColor="#5771FF"
		></w-picker>
	</view>
	
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";//下拉选择组件
	import config from "@/utils/config.js";
	import {createWorshipHall,worshipHallInfo,editWorshipHall} from "@/utils/api/zupu.js" 
	let {uploadFile,photo_cdn} = config.baseUrl;
	export default {
		data() {
			return {
				dead_info:{
					name:'',//名讳
					people_id:'',
					birthday:"",//出生日期
					deathday:'',//忌日
					elegiac:'',//挽辞或者悼词
					photo:"",//照片
				},
				source:'',//2:编辑灵堂进来的
				mourn_id:'',//灵堂id
				worshipHallInfo:{},//查询到的灵堂信息
				photo_cdn,
				defaultVal1:[],
				selectList1:[],
			}
		},
		components:{
			wPicker,
		},
		onLoad(option){
			this.source = option.source?parseInt(option.source):"";
			this.dead_info.people_id = option.people_id;
			if(this.source==2){
				this.dead_info.people_id = option.people_id;
				this.mourn_id = option.mourn_id;
				uni.setNavigationBarTitle({
					title:'编辑灵堂',
				})
				this.worshipHallInfofun();
			}
		},
		methods:{
			//上传图片
			uploadimg(){
				uni.chooseImage({
					count:1,
					sourceType:['album','camera'],//album 从相册选图，camera 使用相机
					success: (e) => {
						uni.uploadFile({
						    url: uploadFile, 
						    filePath: e.tempFilePaths[0],
						    name: 'file',
							header:{
								'token':uni.getStorageSync("token"),
							},
						    formData: {
						       "Content-Type": "multipart/form-data",
						       water: 0
						    },
						    success: (res) => {
								let {data} = JSON.parse(res.data)
								console.log('多选',data);
								// data.url
								this.dead_info.photo = data.url;
								
						    },
							fail: (err) => {
								this.$api.msg("上传图片失败");
							}
						});
					}
				});
			},
			//清除照片
			deleteimg(){
				this.dead_info.photo = ''
			},
			showpicker1(){
				this.$refs.picker1.show();
			},
			showpicker2(){
				this.$refs.picker2.show();
			},
			//日期选择点击后 重置表格
			onConfirm1(e){
				//console.info('e 选时间',e);
				this.dead_info.birthday = e.result;
			},
			onConfirm2(e){
				//console.info('e 选时间',e);
				this.dead_info.deathday = e.result;
			},
			//去创建灵堂
			toFound(){
				if(!this.dead_info.name){
					this.$api.msg("请输入名讳")
					return false;
				}
				if(!this.dead_info.birthday){
					this.$api.msg("请输入生日")
					return false;
				}
				if(!this.dead_info.deathday){
					this.$api.msg("请输入忌日")
					return false;
				}
				if(!this.dead_info.elegiac){
					this.$api.msg("请输入悼词")
					return false;
				}
				createWorshipHall({
					...this.dead_info
				}).then((res)=>{
					if(res.code==1){
						setTimeout(()=>{
							uni.redirectTo({
								url:`/pages/zupu/sacrifice/sacrifice?people_id=${this.dead_info.people_id}`
							})
						},1500)
						
					}else{
						
					}
					this.$api.msg(res.msg);
				})
			},
			//查询并显示灵堂信息
			worshipHallInfofun(){
				worshipHallInfo({
					people_id:this.dead_info.people_id
				}).then((res)=>{
					if(res.code==1){
						this.worshipHallInfo = res.data.worshipHallInfo;
						this.worshipHallInfo.people_id = this.dead_info.people_id;
						for(var i in this.dead_info){
							this.dead_info[i] = this.worshipHallInfo[i];	
						}
						console.log(this.dead_info)
					}
				})
			},
			//修改灵堂信息
			toModify(){
				editWorshipHall({
					id:this.mourn_id,
					...this.dead_info
				}).then((res)=>{
					if(res.code==1){
						this.$api.msg(res.msg);
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
						
					}
				})
			}		
		}
	}
</script>

<style lang="scss">
	@import "./create_mourning.scss"
</style>